<template>
    <div class="">
        <div class="mask">
            <div class="content">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/vip-time.png"
                    alt=""
                />
                <div class="but" @click="goVip"></div>
                <i class="el-icon-circle-close close" @click="close()"></i>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
    name: "breadcrumb",
    components: {},
    props: {},
    data() {
        return {};
    },
    mounted() {},
    watch: {},
    methods: {
        ...mapMutations("common", ["set_payVipShow", "set_vipNoTimeShow"]),
        goVip(){
            this.set_payVipShow(true)
            this.set_vipNoTimeShow(false)
            window.localStorage.setItem("vipCloseTime", "1");
        },
        close(){
            this.set_vipNoTimeShow(false)
            window.localStorage.setItem("vipCloseTime", "1");
        }
    },
};
</script>

<style lang="scss" scoped>
.mask {
    background-color: rgba($color: #000000, $alpha: 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    .content {
        position: relative;
        img {
            width: 487px;
            height: 358px;
        }
        .but {
            width: 271px;
            height: 60px;
            cursor: pointer;
            position: absolute;
            top: 257px;
            left: 107px;
        }
        .close{
            position: absolute;
            color: #fff;
            cursor: pointer;
            font-size: 38px;
            bottom: -56px;
            left: 220px;
        }
    }
}
</style>